<template>
  <div>
    <!-- <div class="toptitle">会员积分</div> -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline" @keyup.enter.native="search()">
      <el-form-item label="会员姓名：">
        <el-input v-model="formInline.memberName" placeholder="请输入会员姓名"></el-input>
      </el-form-item>
      <!-- <el-form-item label="积分范围：">
        <el-input v-model="formInline.beginScore" placeholder="请输入积分下限" class="scoreSty"></el-input>
        <span style="font-size:20px">-</span>
        <el-input v-model="formInline.endScore" placeholder="请输入积分上限" class="scoreSty"></el-input>
      </el-form-item>-->
      <!-- <el-form-item label="会员分类：">
        <el-select v-model="formInline.memberType" placeholder="全部">
          <el-option label="全部" value=" "></el-option>
          <el-option label="潜在会员" value="2"></el-option>
          <el-option label="普通会员" value="1"></el-option>
          <el-option label="收费会员" value="3"></el-option>
        </el-select>
      </el-form-item>-->
      <el-form-item>
        <el-button type="primary" @click="search()" size="mini" icon="el-icon-search">查询</el-button>
        <!-- <el-button type="primary" @click="addjifen()" size="mini" icon="el-icon-search">会员积分新增</el-button> -->
      </el-form-item>
    </el-form>
    <el-table :data="tableData" border :header-cell-style="{background:'#ebecf0',color:'#606266'}">
      <el-table-column type="index" label="序号" align="center" :index="indexMethod" width="60"></el-table-column>
      <el-table-column prop="memberName" label="会员姓名"></el-table-column>
      <el-table-column prop="birthday" label="生日" align="left"></el-table-column>

      <el-table-column prop="cellPhoneNo" label="手机号" align="left"></el-table-column>
      <el-table-column prop="currentScore" label="积分" align="right"></el-table-column>
      <el-table-column prop="memberType" label="会员类型" align="center"></el-table-column>
      <el-table-column prop="sex" label="性别" align="center">
        <template slot-scope="scope">{{scope.row.sex===0?'女':'男'}}</template>
      </el-table-column>

      <el-table-column prop="address" width="80" label="地址"></el-table-column>
      <!-- <el-table-column label="操作" width="180" fixed="right" align="center">
        <template slot-scope="scope">
          <el-button size="mini" @click="edit(scope.row)" type="text">编辑</el-button>
          <el-button @click="handledelete(scope.row)" type="text" size="mini">停用</el-button>
        </template>
      </el-table-column>-->
    </el-table>
    <div class="block" style="margin-top:10px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 50, 100]"
        :current-page="listQuery.current"
        :page-size="listQuery.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { getmemberList } from "@/api/score";
import qs from "qs";
export default {
  data() {
    return {
      listQuery: {
        current: 1,
        size: 10
      },
      formInline: {
        memberName: "",
        memberType: ""
      },

      total: 0,
      tableData: []
    };
  },
  mounted() {
    this.getmemberList();
  },
  methods: {
    // formatVipType: function(row, column) {
    //   let memberType = row.memberType;
    //   if (memberType == "0") {
    //     return "收费会员";
    //   } else if (memberType == "1") {
    //     return "普通会员";
    //   } else if (memberType == "2") {
    //     return "潜在会员";
    //   }
    // },
    addjifen() {
      this.$router.push("/integralrule");
    },
    edit() {
      this.$router.push("/integralrule");
    },
    search() {
      let data = {
        size: this.listQuery.size,
        current: this.listQuery.current,
        condition: {
          keyWord: this.formInline.memberName,
          memberType: this.formInline.memberType
        },
        ascs: [],
        descs: []
      };
      getmemberList(data).then(res => {
        this.tableData = res.records;
        this.total = res.total;
      });
    },

    getmemberList() {
      let data = {
        size: this.listQuery.size,
        current: this.listQuery.current,
        condition: {
          keyWord: this.formInline.memberName,
          memberType: this.formInline.memberType
        },
        ascs: [],
        descs: []
      };
      getmemberList(data).then(res => {
        this.tableData = res.records;
        this.total = res.total;
      });
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.listQuery.size = val;
      this.getappId();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.listQuery.current = val;
      this.getappId();
    },
    indexMethod(index) {
      let curpage = this.listQuery.current; //单前页码，具体看组件取值
      let limitpage = this.listQuery.size; //每页条数，具体是组件取值
      return index + 1 + (curpage - 1) * limitpage;
    },
    renderContent(h, { node, data, store }) {
      return (
        `<span style="flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px;">
          <span>
            <span>{node.label}</span>
          </span>
        </span>`
      );
    }
  }
};
</script>
<style lang="less" scoped>
.toptitle {
  border: 1px solid #e0e0e0;
  border-bottom: 2px solid #188097;
  background: #f5f5f5;
  line-height: 35px;
  margin-bottom: 10px;
  padding: 0 10px;
  font-size: 14px;
  font-weight: bold;
}
.scoreSty {
  width: 160px;
}
</style>